<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS-Form-Creator</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  <!-- Load local lib and tests. -->
  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../dist/jk-js-form-creator.js"></script>
  <script>
      
      //创建表单
      function createForm(){

            //创建要创建表单的json
            alert($('#json_info').val());
            var input_json=eval('(' + $('#json_info').val() + ')'); ;
            
            KSFormCreator
                    .Create()
                    .setMap(input_json)
                    .setTemplateCategory(KSFormCreator.CONST_TEMPLATE_CATEGORY_IS_BOOTSTRAP) //使用bootstrap 做模板，自己也可以扩展 KSFormCreator.prototype.getCellTemplate=function(cell_type,catgory) 来生生成自己需要的模板
                    .makeForm($('#form_div'));
      }
  </script>
  
</head>
<body>
    <h1>INPUT JSON</h1>
    <textarea id="json_info" style="width:800px;">
                                {
                "action": "http://www.baidu.com/s",
                "method": "GET",
                "default":{
                    "attr":[["style","color:red;"]],
                },
                "cell": [
                    {
                        "type": "text",
                        "name": "wd",
                        "attr":[["style","color:blue;"],["value","Javascript 是大势所趋"]],
                        "template":[["#label#","百度搜索"]]
                    },
                    {
                        "type": "text",
                        "name": "pn",
                        "attr":[["value","20"]],
                        "template":[["#label#","目标页码"]]
                    },
                    {
                        "type": "checkbox",
                        "name": "c1",
                        "attr":[["checked","checked"]],
                        "template":[["#label#","CheckBox"]]
                    },
                    {
                        "type": "radio", 
                        "name": "r1",
                        "attr":[["value","Cat"],["checked","checked"]],
                        "template":[["#label#","I like cat!"]]
                    },
                    {
                        "type": "radio", 
                        "name": "r1",
                        "attr":[["value","Dog"]],
                        "template":[["#label#","I like dog!"]]
                    },
                    {
                        "type": "select", 
                        "name": "s1",
                        "attr":[],
                        "template":[["#label#","下拉单选"]],
                        "cell":[
                            {
                                "type": "option", 
                                "attr":[],
                                "template":[["#value#","Option-Red"]],
                            },
                            {
                                "type": "option", 
                                "attr":[],
                                "template":[["#value#","Option-Blue"]],
                            }
                        ]
                    },
                    {
                        "type": "select", 
                        "name": "s2",
                        "attr":[["multiple","multiple"]],
                        "template":[["#label#","下拉多选"]],
                        "cell":[
                            {
                                "type": "option", 
                                "attr":[],
                                "template":[["#value#","Option-Glay"]],
                            },
                            {
                                "type": "option", 
                                "attr":[],
                                "template":[["#value#","Option-Yellow"]],
                            }
                        ]
                    },
                    {
                        "type": "submit",
                        "name": "form_submit",
                        "attr":[["value","Go baidu"]],
                        "template":[]
                    }
                ]
            }
    
    
    
    </textarea>
    <br/>
    <input type="button" value="生成表单" onclick="createForm();" />
    <hr/>
    <div id="form_div" style="width:500px;"></div>
</body>
</html>


